<template>
	<!-- <view class="pf" :style="`top: ${customBar} ;`"> -->
	<view class="pf" :style="{ top: customBar }">
		<view v-if="show" @tap.stop="toLive" class="flex flex-x-y"
			style="background-color: #FDEEE2; width: 100vw;height: 78rpx;color: #323232;">
			<view class="flex flex-y-center flex-1 pl-40 pr-40">
				<image src="../../static/fgx/live.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<view class="fs-28 over-line1 flex-1 ml-20">
					邀请你加入直播
				</view>
				<view class="iconfont icon-jinru" style="font-size: 40rpx;width: 20rpx;"></view>
			</view>
		</view>

		<toast ref="toast"></toast>
		<paylist ref="payList"></paylist>
	</view>


</template>

<script>
	import {
		payByliveId
	} from '@/utils/pay.js';
	export default {
		name: 'group-all',
		props: {
			id: {
				type: [String, Number],
				default: '',
			},
		},
		data() {
			return {
				customBar: getApp().globalData.customBar + 'px',
				show: false,
				roomId: '',
			}
		},
		methods: {
			refresh() {
				this.request({
					url: '/live/groupLive',
					data: {
						groupId: this.id
					},
					voice: true,
				}).then(res => {
					if (res.status == 200 && res.data) {
						this.show = true;
						this.info = res.data;
					} else {
						this.show = false;
					}
				});
			},
			toLive() {



				if (this.info.isFee == true && this.info.userIsFee == false) {
					this.$refs.toast.open({
						title: '付费提醒',
						desc: `该直播需要付费 ${this.info.fee} 元才能观看`,
						right: '确认付费',
						success: () => {
							
							//选择支付方式
							this.$refs.payList.open({
								price: this.info.fee,
								success: (id, price,detail) => {
									/////////
									this.less(payByliveId({
										liveId: this.info.id,
										payType: id,
										price:price,
										success: () => {
											this.showToast('支付成功');
											this.to_look();
										},
										fail: () => {
											this.showToast('支付失败');
										}
									}));
									////////
								}
							});
							return;
							////////////////////////////
							
							
							// this.less(() => {
							// 	payByliveId({
							// 		liveId: this.info.id,
							// 		success: () => {
							// 			this.showToast('支付成功');
							// 			this.to_look();
							// 		},
							// 		fail: () => {
							// 			this.showToast("支付失败");
							// 		}
							// 	});
							// });
						}
					});
					return;
				}



				this.to_look();






			},
			to_look() {
				getApp().globalData.liveData = this.info;
				this.toPage(
					`/pages/chat/live?status=2&roomId=${this.info.roomId}&gid=${this.info.groupId}&remoteUserId=${this.info.userId}`
				);
			}
		},
	}
</script>

<style>
	.phone-logo {
		width: 52rpx;
		height: 52rpx;
		margin: 12rpx 20rpx;
	}

	.topbox {
		width: 686rpx;
		height: 78rpx;
		color: #fff;
		background-color: #214F7E;
		left: 32rpx;
		border-radius: 8rpx;

	}
</style>
